<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .wrap {
      width: 800px;
      height: 400px;
      /* background-color: #eee; */
    }
  </style>
</head>

<body>
  <div class="wrap"></div>
  <script src="./echarts.min.js"></script>
  <script>
    // 1. 初始化echarts 示例
    const myChart = echarts.init(document.querySelector('.wrap'),)

    // 2. 定义图表数据
    /* const option = {
      title: {
        text: '入门示例'
      },
      tooltip: {},
      xAxis: {
        data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月',]
      },
      yAxis: {},
      series: [
        {
          name: '销量',
          type: 'bar',
          data: [1, 2, 3, 4, 5, 6, 7, 8, 9, 1, 2, 3]
        }
      ]
    }
    */
    // 数据集
    // const option = {
    //   legend: {
    //     data: ['a', 'b', 'c']
    //   },

    //   grid: {
    //     show: true,
    //     left: '1%',
    //     right: '1%',
    //     containLabel: true,
    //     backgroundColor: '#ccc'
    //   },
    //   tooltip: {},
    //   toolbox: {
    //     feature: {
    //       saveAsImage: {},
    //       dataView: {},
    //       tooltip: { // 和 option.tooltip 的配置项相同
    //         show: true,
    //         formatter: function (param) {
    //           return '<div>' + param.title + '</div>'; // 自定义的 DOM 结构
    //         },
    //         backgroundColor: '#222',
    //         textStyle: {
    //           fontSize: 12,
    //         },
    //         extraCssText: 'box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);' // 自定义的 CSS 样式
    //       }
    //     }
    //   },
    //   dataZoom: [{ type: "slider" }],
    //   dataset: {
    //     source: [
    //       ["一月", 20, 30, "xx", 10],
    //       ["二月", 25, 35, "yy", 20],
    //       ["三月", 18, 28, "zz", 30],
    //       ["四月", 30, 40],
    //       ["五月", 10, 20],
    //       ["六月", 20, 30],
    //       ["七月", 25, 35],
    //       ["八月", 18, 18],
    //       ["九月", 30, 40],
    //       ["十月", 10, 20],
    //       ["十一月", 22, 32],
    //       ["十二月", 33, 43],
    //     ]
    //   },
    //   // 声明一个 x 轴，分类轴。默认情况下，分类轴对应到dataset第一列
    //   xAxis: {
    //     type: 'category', axisTick: {
    //       show: true,
    //       alignWithLabel: true
    //     }
    //   },
    //   // 声明一个 y 轴，数值轴
    //   yAxis: {
    //     show: true,
    //     position: 'left',
    //     // boundaryGap: ['10%', '10%']
    //     axisLine: {
    //       show: true,
    //       symbol: ['none', 'arrow']
    //     },
    //     axisTick: {
    //       show: true,
    //       alignWithLabel: true
    //     }
    //   },
    //   // 声明多个图表类型.默认情况下，每个系列会自动对应到 dataset 的每一列
    //   series: [
    //     {
    //       name: 'a',
    //       type: 'bar',
    //       encode: { y: 1 }
    //     },
    //     {
    //       name: 'b',
    //       type: 'line',
    //       encode: { y: 2 }
    //     },
    //     {
    //       name: 'c',
    //       type: 'pie',
    //       encode: { itemName: 3, value: 4 },
    //       showEmptyCircle: true,
    //       radius: ['7%', '15%'],
    //       center: ['80%', '15%']
    //     }

    //   ]

    // }

    // 3. 绘制图表
    // myChart.setOption(option)
    myChart.showLoading();
    $.getJSON(ROOT_PATH + '/data/asset/data/les-miserables.json', function (graph) {
      myChart.hideLoading();
      graph.nodes.forEach(function (node) {
        node.label = {
          show: node.symbolSize > 30
        };
      });
      option = {
        title: {
          text: 'Les Miserables',
          subtext: 'Circular layout',
          top: 'bottom',
          left: 'right'
        },
        tooltip: {},
        legend: [
          {
            data: graph.categories.map(function (a) {
              return a.name;
            })
          }
        ],
        animationDurationUpdate: 1500,
        animationEasingUpdate: 'quinticInOut',
        series: [
          {
            name: 'Les Miserables',
            type: 'graph',
            layout: 'circular',
            circular: {
              rotateLabel: true
            },
            data: graph.nodes,
            links: graph.links,
            categories: graph.categories,
            roam: true,
            label: {
              position: 'right',
              formatter: '{b}'
            },
            lineStyle: {
              color: 'source',
              curveness: 0.3
            }
          }
        ]
      };
      myChart.setOption(option);
    });


  </script>
</body>

</html>